<script>
export default {
  data() {
    return {
      myst: {},
      dialogVisible: false,
      mfily: [],
      dewllerss: [],
      form: {},
      selectedTags: [],
      my: {
        phone: '',
        identity: '',
      },
      tableData: [],
      agform: [],
      teams: [],
      packs: [],
      doctors: [],
      addresses: [],
      sources: [],
      notes: '',
      myst: {},
      zbid: '111111111',
      isPhoneValid: false,
      isIdentityValid: false,


      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        identity: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' },
          { pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur'}
        ],
      //   // identity: [
      //   //   { required: true, message: '身份证号不能为空', trigger: 'blur' },
      //   //   { validator: validateIdentity, trigger: 'blur' }
      //   // ]
      }
      // 其他数据,
    };
  },
  watch: {
    'my.phone':{
      handler() {
        this.validatePhoneNumber();
      },
      immediate: true
    },
    'my.identity': {
      handler() {
        this.validateIdentity();
      },
      immediate: true
    },
  },

  methods: {
    validateIdentity() {
      const cation = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      this.isIdentityValid = cation.test(this.my.identity)
    },
    validatePhoneNumber() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      this.isPhoneValid = phoneRegex.test(this.my.phone);
    },


    submit() {
      this.my.label = this.selectedTags.join(",");
      this.axios.post(`http://localhost:9000/b/stables/addDwellers`, this.my).then(res => {
        this.zbid = res.data.data.id;
        this.axios.post(`http://localhost:9000/b/stables/addStales/${this.zbid}`, this.myst).then(res => {
          alert(this.zbid)
          this.$message({
            message: '添加成功',
            type: 'success',
          });
        })
      })
      setTimeout(() => {
        this.$router.go(-1);
      }, 1000);
      if (this.isPhoneValid){
        if(this.isIdentityValid){
          this.my.label = this.selectedTags.join(",");
          this.axios.post(`http://localhost:9000/b/stables/addDwellers`, this.my).then(res => {
            this.zbid = res.data.data.id;
            this.axios.post(`http://localhost:9000/b/stables/addStales/${this.zbid}`, this.myst).then(res => {
              this.$message({
                message: '添加成功',
                type: 'success',
              });
            })
          })
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        }else {
          this.$message({
            message: '身份证号不正确',
            type: 'error',
          });
        }
      }else {
        this.$message({
          message: '请输入正确的手机号',
          type: 'error',
        });
      }
    },


    tan() {
      this.dialogVisible = true;
    },

    confirm() {
      this.dialogVisible = false;
      // 提交处理逻辑
    },
    getDwellers() {
      // 获取所有居民数据
      this.axios.post(`http://localhost:9000/b/dwellers/list`).then(res => {
        this.dewllerss = res.data.data;
      });
    },

    getMfily() {
      // 获取所有家庭成员数据
      this.axios.post(`http://localhost:9000/b/mfily/list`).then(res => {
        this.mfily = res.data.data;
      });
    },
    getAg() {
      this.axios.post(`http://localhost:9000/b/agencies/list`).then(res => {
        this.agform = res.data.data;
      })
    },
    getTimes() {
      this.axios.post(`http://localhost:9000/b/team/list`).then(res => {
        this.teams = res.data.data;
      })
    },
    getPacks() {
      this.axios.post(`http://localhost:9000/b/packs/list`).then(res => {
        this.packs = res.data.data;
      })
    },
    getAddress() {
      this.axios.post(`http://localhost:9000/b/address/list`).then(res => {
        this.addresses = res.data.data;
      })
    },
    getDoctor() {
      this.axios.post(`http://localhost:9000/b/doctor/list`).then(res => {
        this.doctors = res.data.data;
      })
    },
    getSource() {
      this.axios.post(`http://localhost:9000/b/source/list`).then(res => {
        this.sources = res.data.data;
      })
    },
    generateRandomNumbers(length) {
      let randomNumberString = '';
      for (let i = 0; i < length; i++) {
        randomNumberString += Math.floor(Math.random() * 10);
      }
      this.myst.number = randomNumberString;
    },
    goBack() {

      this.$router.go(-1); // 返回上一页
    },
  },
  created() {
    this.getDwellers();
    this.getMfily();
    this.getAg();
    this.getTimes();
    this.getPacks();
    this.getDoctor();
    this.getAddress();
    this.generateRandomNumbers(10);
  }
};
</script>

<template>
  <div class="container">
    <h4 class="section-title">新增服务信息</h4>
    <el-divider></el-divider>

    <h6 class="sub-title">居民信息</h6>
    <el-form :inline="true" :model="my" class="demo-form-inline">
      <el-form-item label="选择居民" clearable>
        <el-select v-model="my.id" placeholder="选择居民" class="select">
          <el-option
              v-for="item in dewllerss"
              :key="item.id"
              :label="`${item.name}  ${item.sex==1?'男':'女'} ${item.age}岁`"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form :model="my" :rules="rules" ref="formRef">-->
      <el-form-item label="身份证号" prop="identity" :rules="rules.identity" ref="formRef">
        <el-input v-model="my.identity" placeholder="请输入身份证号"></el-input>
      </el-form-item>
<!--      </el-form>-->

      <el-form-item label="性别">
        <el-select v-model="my.sex" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="出生年月">
        <el-date-picker
            type="date"
            placeholder="选择出生年月"
            v-model="my.birthday"
            style="width: 100%"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="手机号" prop="phone" :rules="rules.phone" ref="formRef">
        <el-input v-model="my.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item label="现居地">
        <el-input v-model="my.current" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="居民标签">
        <el-select v-model="selectedTags" multiple placeholder="请选择服务包标签">
          <el-option label="慢病护理" value="慢病护理"></el-option>
          <el-option label="高血压" value="高血压"></el-option>
          <el-option label="高血糖" value="高血糖"></el-option>
          <el-option label="糖尿病" value="糖尿病"></el-option>
          <el-option label="脑卒中" value="脑卒中"></el-option>
          <el-option label="嘉辉病" value="嘉辉病"></el-option>
          <el-option label="玉玉症" value="玉玉症"></el-option>
          <el-option label="抑郁症" value="抑郁症"></el-option>
          <el-option label="脑梗" value="脑梗"></el-option>
          <el-option label="风湿" value="风湿"></el-option>
          <el-option label="新冠" value="新冠"></el-option>
        </el-select>
      </el-form-item>

      <el-button type="text" @click="tan" class="link-button">+ 关联家庭成员</el-button>
    </el-form>

    <el-divider></el-divider>
    <h6 class="sub-title">服务信息</h6>
    <el-form :model="myst" class="demo-form">
      <el-form-item label="编号" class="form-item">
        {{ myst.number }}
      </el-form-item>

      <el-form-item label="服务机构" clearable class="form-item">
        <el-select v-model="myst.ageid" placeholder="服务机构">
          <el-option label="全部" value=""></el-option>
          <el-option
              v-for="item in agform"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务团队" clearable class="form-item">
        <el-select v-model="myst.tid" placeholder="服务团队">
          <el-option label="全部" value=""></el-option>
          <el-option
              v-for="item in teams"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务医生" clearable class="form-item">
        <el-select v-model="myst.did" placeholder="服务医生">
          <el-option label="全部" value=""></el-option>
          <el-option
              v-for="item in doctors"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务包  " clearable class="form-item">
        <el-select v-model="myst.pid" placeholder="服务包">
          <el-option label="全部" value=""></el-option>
          <el-option
              v-for="item in packs"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务项目" clearable class="form-item">
        <el-select v-model="myst.project" placeholder="服务项目">
          <el-option label="全部" value=""></el-option>
          <el-option label="血糖监测" value="血糖监测"></el-option>
          <el-option label="血压检测" value="血压检测"></el-option>
          <el-option label="体检" value="体检"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务地点" clearable class="form-item">
        <el-select v-model="myst.aid" placeholder="服务地点">
          <el-option label="全部" value=""></el-option>
          <el-option
              v-for="item in addresses"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务时间" class="form-item">
        <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择服务时间"
            v-model="myst.shours"
            style="width: 100%"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="服务备注" clearable class="form-item">
        <el-input type="textarea" v-model="myst.notes" placeholder="请输入服务备注"></el-input>
      </el-form-item>

      <div class="form-actions" style="text-align: left">
        <el-button type="primary" @click="submit">提交审核</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </el-form>

    <el-dialog title="关联家庭成员" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="my">
        <el-form-item label="选择成员" required>
          <el-select v-model="my.mid" placeholder="请选择">
            <el-option
                v-for="item in mfily"
                :key="item.id"
                :label="`${item.name} ${item.fsex==1?'男':'女'} ${item.fage}岁`"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择关系" required>
          <el-select v-model="my.mid" placeholder="请选择">
            <el-option
                v-for="item in mfily"
                :key="item.id"
                :label="`${item.gx}`"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
  background-color: #ffffff;  /* 设置为白色，以便与内容区域形成对比 */
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 1200px;  /* 限制最大宽度，使其在大屏幕上也不会过于宽 */
  margin: 0 auto;  /* 居中对齐 */
}

.section-title {
  font-size: 26px;  /* 增大字体 */
  color: #333;
  margin-bottom: 10px;  /* 适当增加外边距 */
}

.sub-title {
  font-size: 20px;  /* 增大字体 */
  color: #555;
  margin-top: 20px;
  margin-bottom: 10px;
}

.demo-form-inline,
.demo-form {
  margin-bottom: 20px;
  background-color: #f9f9f9;  /* 修改背景色为更温和的颜色 */
  padding: 30px;  /* 增加内边距，使内容更舒适 */
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.form-actions {
  text-align: right;  /* 右对齐 */
  margin-top: 20px;  /* 增加外边距 */
}

.link-button {
  font-size: 14px;
  color: #409EFF;
  margin-top: 10px;  /* 增加外边距 */
}

.dialog-footer {
  text-align: right;
}
.demo-form {
  margin-left: 10px; /* 将表单整体向左移动 */
}

.form-item {
  margin-left: 0; /* 移除左边距 */
}

.el-form-item__label {
  margin-bottom: 5px; /* 增加标签与输入框之间的间距 */
}

</style>
